<template>
    <div>
        <div class="category_content">
            <div class="search_content">
                <div class="search_click">
                    <span style="color:rgba(0,0,0,0.4);font-size:12px">搜索商品</span>
                    <div class="search_icon_content">
                        <span class="iconfont " style="color:white;font-size:12px">&#xe62f;</span>
                    </div>
                </div>
            </div>
            <div class="category_head_content">
                <div class="category_head_line"></div>
                <div class="category_head_title_content">
                    <span style="font-size:13.5px;line-height:13.5px;font-weight:600;color: black">{{content.title}}</span>
                    <span style="font-size:12px;line-height:33px;font-weight:500">{{content.subTitle}}</span>
                </div>
            </div>
            <el-carousel :height="height" :autoplay="false" arrow="hover">
                <el-carousel-item :style="allHeight" class="swiper-item" v-for="itemName in categorys">
                    <div v-for="item in itemName " :class="[item.logo == ''?'category_clickTwo':'category_click']" @click="toRecommend(item)">
                        <img v-if="item.logo != ''" :src="item.logo" style="width:100px;height:100px"></img>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>

<script>
import { list } from "@/api/navigation";
import { mapGetters } from "vuex";
import utils from "../../../../utils/utils.js";
export default {
    name: "magic_category",
    data() {
        return {
            categorys: [],
            categorysForm: [
                {
                    name: "天猫新品",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%A4%A9%E7%8C%AB.png",
                },
                {
                    name: "今日爆款",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E7%88%86%E6%AC%BE%E4%BA%A7%E5%93%81.png",
                },
                {
                    name: "天猫国际",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%9B%BD%E9%99%85%E6%B8%B8%E5%AD%A6.png",
                },
                {
                    name: "天猫超市",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%B0%8F%E8%B6%85%E5%B8%82.png",
                },
                {
                    name: "芭芭农村",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%88%91%E7%9A%84%E5%86%9C%E5%9C%BA.png",
                },
                {
                    name: "充值中心",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E5%85%85%E5%80%BC.png",
                },
                {
                    name: "淘鲜达",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%B5%B7%E9%B2%9C.png",
                },
                {
                    name: "淘金币",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%88%91%E7%9A%84%E9%87%91%E5%B8%81.png",
                },
                {
                    name: "阿里拍卖",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%8D%A1%E6%BC%8F%E5%A4%A7%E9%9B%86.png",
                },
                {
                    name: "分类",
                    logo: "http://rzico-weex.oss-cn-hangzhou.aliyuncs.com/designer/category/%E6%9B%B4%E5%A4%9A%E5%88%86%E7%B1%BB.png",
                },
            ],
            allHeight: "",
            height: "",
            tagIds: [],
            pageSize: 2,
            pageNum: 1,
        };
    },
    created() {
        this.loadList();
    },
    computed: {
        ...mapGetters(["mchId"]),
    },
    props: ["content"],
    methods: {
        loadList() {
            var _this = this;
            if (!utils.isNull(this.content.tagids)) {
                this.tagIds = this.content.tagids.split(",");
                for (var i = 0; i < _this.tagIds.length; i++) {
                    _this.tagIds[i] = parseInt(_this.tagIds[i]);
                }
            }
            _this.pageSize = _this.content.rows;
            let params = new URLSearchParams();
            params.append("mchId", this.mchId);
            params.append("pageSize", this.pageSize);
            for (var i = 0; i < this.tagIds.length; i++) {
                params.append("tagIds", this.tagIds[i]);
            }
            list(params).then((res) => {
                res.data.data.forEach((item) => {
                    if (utils.isNull(item.logo)) {
                        item.logo =
                            "http://cdnx.hulu.fj.cn/upload/20200624/4.png";
                    }
                });
                if(res.data.data.length > 0){
                  _this.filterClick(res.data.data)
                }else{
                  _this.filterClick(_this.categorysForm)
                }
            });
        },
        filterClick(data) {
            var _this = this;
            let len = data.length;
            let n = 9; //假设每行显示4个
            let lineNum = len % 9 === 0 ? len / 9 : Math.floor(len / 9 + 1);
            let array = [];
            for (let i = 0; i < lineNum; i++) {
                // slice() 方法返回一个从开始到结束（不包括结束）选择的数组的一部分浅拷贝到一个新数组对象。且原始数组不会被修改。
                let temp = data.slice(i * n, i * n + n);
                array.push(temp);
            }
            if (data.length < 4) {
                this.height = "135px";
                this.allHeight = "height:120px";
            } else if (data.length > 3 && data.length < 7) {
                this.height = "255px";
                this.allHeight = "height:240px";
            } else if (data.length > 6) {
                this.height = "375px";
                this.allHeight = "height:360px";
            }
            this.categorys = array;
            var objForm = {
                logo: "",
            };
            var objFormTwo = {
                logo: "",
            };
            this.categorys.forEach(function (item) {
                if (item.length == 1 || item.length == 4 || item.length == 7) {
                    item.push(objForm);
                    item.push(objFormTwo);
                } else if (
                    item.length == 2 ||
                    item.length == 5 ||
                    item.length == 8
                ) {
                    item.push(objForm);
                }
            });
            console.log(this.categorys)
            console.log(this.height)
        },
        toRecommend(data) {},
    },
};
</script>

<style scoped>
.category_content {
    width: 375px;
    /*border-radius: 8px;*/
    box-sizing: border-box;
    /*margin-left: 10px;*/
    padding: 10px;
    background-color: white;
}
.category_head_content {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
}
/deep/.el-carousel__container {
    height: 0px;
}
.category_head_line {
    height: 35px;
    width: 5px;
    background-color: black;
    border-radius: 7.5px;
}
.category_head_title_content {
    display: flex;
    height: 30px;
    margin-left: 10px;
    flex-direction: column;
    justify-content: space-between;
}
.category_bottom_content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 15px;
    max-height: 275px;
    justify-content: space-around;
    /*overflow-x: auto;*/
}
.swiper-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 15px;
    /* max-height: 550px; */
    justify-content: space-around;
    align-items: flex-start;
}
.category_click {
    width: 100px;
    height: 100px;
    /* margin-right:22px; */
    background-color: rgb(248, 248, 248);
    border-radius: 10px;
    margin-bottom: 10px;
}

.category_clickTwo {
    width: 100px;
    height: 100px;
    /* margin-right:22px; */
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px;
}
.search_content {
    height: 65px;
    width: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.search_click {
    width: 100%;
    height: 33px;
    padding-left: 10px;
    background-color: #f3f4f6;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search_icon_content {
    height: 33px;
    border-radius: 8px;
    background-color: #303030;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33px;
}
</style>
